<template>
  <view class="container">
    <!-- 图片轮播——带右下角数量显示 -->
    <view class="advertisement m-b-30">
      <swiper
        :autoplay="false"
        :interval="3000"
        :duration="1000"
        :circular="true"
        indicator-active-color="#FF5040"
        indicator-color="#EDEEF0"
        :indicator-dots="true"
      >
        <swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index">
          <image :src="$util.img(item, { size: 'big' })" mode="aspectFill" :lazy-load="true"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="boxmain">
      <view class="font-40 text-bold">{{ goodsSkuDetail.goods_name }}</view>
      <view class="c-8d font-24 m-t-10">{{ goodsSkuDetail.introduction }}</view>
    </view>

    <view class="boxmain" v-if="goodsSkuDetail.goods_spec_format">
      <view v-for="(item, index) in goodsSkuDetail.goods_spec_format" :key="index">
        <view class="font-40 text-bold m-b-20">{{ item.spec_name }}</view>
        <view class="cate">
          <text
            class="cate-tags"
            v-for="(item_value, index_value) in item.value"
            :key="index_value"
            :class="{
              active: item_value['selected'] || skuId == item_value.sku_id,
            }"
            @click="change(item_value.sku_id, item_value.spec_id)"
            >{{ item_value.spec_value_name }}</text
          >
        </view>
      </view>
    </view>

    <view class="goods-details p-l-24 p-r-24" v-if="goodsSkuDetail.goods_content">
      <rich-text :nodes="goodsSkuDetail.goods_content" :data-nodes="goodsSkuDetail.goods_content"></rich-text>
    </view>

    <view class="fixfooter">
      <view class="flex-between">
        <view class="font-36 text-bold c-origin">¥{{ goodsSkuDetail.price }}</view>
        <view class="list-gg-btn">
          <u-icon name="minus-circle" color="#00D075" size="24" @click="decreaseNum"></u-icon>
          <text>{{ num }}</text>
          <u-icon name="plus-circle-fill" color="#00D075" size="24" @click="increaseNum"></u-icon>
        </view>
      </view>
      <view class="font-26 c-60">{{ goodsSkuDetail.goods_name }}</view>
      <view class="submit" @click="addCart">加入购物车</view>
    </view>
  </view>
</template>

<script>
import htmlParser from "@/common/js/html-parser";
export default {
  data() {
    return {
      images: [],
      skuId: 0,
      goodsSkuDetail: {},
      //选中的规格
      goods_sku_ids: "",
      goods_sku_names: "",
      num: 1,
    };
  },
  onLoad(option) {
    if (option.id) {
      this.skuId = option.id;
    }
    this.getGoodsDetail();
  },
  methods: {
    decreaseNum() {
      if (this.num > 1) {
        this.num--;
      }
    },
    increaseNum() {
      // 限购判断
      if (this.goodsSkuDetail.is_limit && this.num >= this.goodsSkuDetail.max_buy) {
        this.$util.showToast({
          title: "限购" + this.goodsSkuDetail.max_buy + "件",
        });
        return false;
      }
      this.num++;
    },
    change(skuId, spec_id) {
      this.skuId = skuId;
      // 清空选择
      for (var i = 0; i < this.goodsSkuDetail.goods_spec_format.length; i++) {
        var sku = this.goodsSkuDetail.goods_spec_format[i];
        for (var j = 0; j < sku.value.length; j++) {
          // 排除当前点击的规格值
          if (spec_id == this.goodsSkuDetail.goods_spec_format[i].value[j].spec_id) {
            this.goodsSkuDetail.goods_spec_format[i].value[j].selected = false;
          }
        }
      }

      this.getGoodsDetail();
    },
    addCart() {
      // 判断是否登录
      if (!uni.getStorageSync("token")) {
        this.$util.showToast({
          title: "请先登录",
        });
        return false;
      }
      this.$api.sendRequest({
        url: "/canteen/api/cart/add",
        data: {
          canteen_id: uni.getStorageSync("storeInfo").canteen_id,
          num: this.num,
          sku_id: this.skuId,
        },
        success: (res) => {
          if (res.code == 0) {
            this.$util.showToast({
              title: "加入购物车成功",
            });
            uni.navigateBack({
              delta: 1,
            });
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
    getGoodsDetail() {
      this.$api.sendRequest({
        url: "/canteen/api/goodssku/detail",
        data: {
          sku_id: this.skuId,
        },
        success: (res) => {
          if (res.code == 0) {
            let data = res.data;
            if (data.goods_sku_detail != null) {
              this.goodsSkuDetail = data.goods_sku_detail;

              if (this.goodsSkuDetail.sku_images)
                this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
              else this.goodsSkuDetail.sku_images = [];

              // 多规格时合并主图
              if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
                this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
                this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.concat(this.goodsSkuDetail.goods_image);
              }

              // 当前商品SKU规格
              if (this.goodsSkuDetail.sku_spec_format)
                this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);

              // 商品SKU格式
              if (this.goodsSkuDetail.goods_spec_format)
                this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);

              // 商品详情
              if (this.goodsSkuDetail.goods_content)
                this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);

              uni.setNavigationBarTitle({
                title: this.goodsSkuDetail.goods_name,
              });

              console.log("555", this.goodsSkuDetail.goods_spec_format);
            }
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
  },
  onShareAppMessage: function () {
    console.log(this.goodsSkuDetail.sku_images);
    return {
      title: this.goodsSkuDetail.goods_name,
      imageUrl: this.$util.img(this.goodsSkuDetail.sku_images[0]),
      path: "/otherpages/food/detail?id=" + this.skuId,
    };
  },
  onShareTimeline: function () {
    return {
      title: this.goodsSkuDetail.goods_name,
      imageUrl: this.$util.img(this.goodsSkuDetail.sku_images[0]),
      path: "/otherpages/food/detail?id=" + this.skuId,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 300rpx;
}
// 轮播图
.advertisement {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  /deep/ swiper {
    height: 750rpx;
  }
  image {
    margin: 0 auto;
    width: 750rpx;
    height: 750rpx;
  }
}

.boxmain {
  background-color: #fff;
  padding: 30rpx 24rpx;
  margin-bottom: 20rpx;

  .gg {
    .gg-tags {
      display: inline-block;
      padding: 4rpx 20rpx;
      border: 1px solid #5d6581;
      color: #5d6581;
      font-size: 26rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
    }
  }

  .cate {
    margin-bottom: 20rpx;
    .cate-tags {
      display: inline-block;
      padding: 12rpx 44rpx;
      background-color: #f8f9fa;
      margin-right: 30rpx;
      border-radius: 40rpx;
    }

    .active {
      background-color: $color-title2 !important;
      color: #fff !important;
    }
  }
}

.fixfooter {
  padding: 10rpx 24rpx;
  box-sizing: border-box;

  .list-gg-btn {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #1c274c;
    text {
      display: inline-block;
      width: 40rpx;
      text-align: center;
    }
  }

  .submit {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: $color-title2;
    color: #fff;
    border-radius: 60rpx;
    padding: 10rpx;
    margin-top: 20rpx;
  }
}
</style>
